<template>
    <div class="container">
        <el-page-header @back="goBack" content="推广奖励核算"></el-page-header>
        <!--div class="e-m-t-15">
            <el-radio-group v-model="dataType">
                <el-radio-button label="0">出库核算</el-radio-button>
                <el-radio-button label="1">推广奖励核算</el-radio-button>
            </el-radio-group>
        </div-->
        <div class="e-m-t-45">
            <div class="flex" style="justify-content: flex-end;">
                <el-form :inline="true" class="nav-bar-form">
                    <el-form-item>
                        <el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"
                            @clear="getList"></el-input>
                    </el-form-item>
                    <!-- <el-form-item>
                        <el-input placeholder="订单号" v-model="key" clearable prefix-icon="el-icon-search"
                            @clear="getList"></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%" stripe>
            <el-table-column fixed prop="relationnumber" label="关联订单" width="200">
            </el-table-column>
            <el-table-column prop="createusername" label="推广人">
                <template slot-scope="scope">
                    <span>{{ scope.row.createusername ? scope.row.createusername : '--' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="amount" label="推广金额（元）" width="180">
            </el-table-column>
            <el-table-column prop="type" label="推广类型" width="180">
            </el-table-column>
            <el-table-column prop="createddatetime" label="完成时间" width="180">
            </el-table-column>
            <el-table-column prop="state" label="订单状态" width="180">
                <template slot-scope="scope">
                    <span class="color-success" v-if="scope.row.state == '已审核'">{{ scope.row.state }}</span>
                    <span class="color-danger" v-else-if="scope.row.state == '已驳回'">{{ scope.row.state }}</span>
                    <span class="color-warning" v-else>{{ scope.row.state }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="200">
                <template slot-scope="scope">
                    <el-button @click="views(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="examine(scope.row.id)" type="text" size="small"
                        v-if="scope.row.state == '待审核'">通过</el-button>
                    <el-button @click="reject(scope.row.id)" type="text" size="small"
                        v-if="scope.row.state == '待审核'">驳回</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="table-pagination">
            <el-pagination background layout="sizes, total, prev, pager, next" :total="total"
                :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
                @size-change="handleSizeChange">
            </el-pagination>
        </div>
        <el-dialog title="核验情况" :visible.sync="dialogVisible" width="500px">
            <el-descriptions :column="1" border :labelStyle="{ width: '120px' }">
                <el-descriptions-item label="奖励情况">
                    <span class="color-success" v-if="form.state == '已审核'">{{ form.state }}</span>
                    <span class="color-danger" v-else-if="form.state == '已驳回'">{{ form.state }}</span>
                    <span class="color-warning" v-else>{{ form.state }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="驳回原因" v-if="form.state == '已驳回'">{{ form.reason }}</el-descriptions-item>
                <el-descriptions-item label="核验时间">{{ form.updatedatetime }}</el-descriptions-item>
                <el-descriptions-item label="核验人员">{{ form.updateusername }}</el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    layout: 'admin',
    head() {
        return {
            title: '出库核算列表' 
        }
    },
    data() {
        return {
            rules: {
                accountid: [
                    { required: true, message: '请选择账号类型', trigger: 'blur' },
                ],
                flowaccount: [
                    { required: true, message: '请输入流水账号', trigger: 'blur' },
                ],
                incomeamount: [
                    { required: true, message: '请输入金额', trigger: 'blur' },
                ],
                date: [
                    { required: true, message: '请输入到账日期', trigger: 'blur' },
                ],
                picvoucher: [
                    { required: true, message: '请输上传图片', trigger: 'blur' },
                ],
            },
            value: '',
            key: '',
            page: 1,
            pageSize: 10,
            status: 1,
            loading: false,
            total: 0,
            dialogVisible: false,
            dialogType: 'add',
            form: {

            },
            tableData: [],
            dataType: 1
        }
    },
    watch: {
        dataType(val) {
            console.log(val)
            if (val == 0) {
                this.$router.push({
                    path: '/finance/list'
                })
            } else if (val == 1) {
                this.$router.push({
                    path: '/finance/commission'
                })
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        getList() {
            this.loading = true
            this.$axios.post('/Promoter/Commission/List', {
                "PageIndex": this.page,
                "PageSize": this.pageSize,
                "Key": this.key,
            }).then((res) => {
                this.tableData = res.rows;
                this.total = res.total;
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        views(row) {
            this.dialogVisible = true
            this.form = row
        },
        search() {
            this.getList()
        },
        pageChange(e) { // 页码切换事件
            this.page = e;
            this.getList()
        },
        handleSizeChange(val) {
            this.page = 1;
            this.pageSize = val;
            this.getList()
        },
        examine(id) {
            this.$confirm('是否确认要通过审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.get('/Promoter/Commission/Pass?id=' + id).then((res) => {
                    this.$message.success(res.msg);
                    this.dialogVisible = false
                    this.getList()
                })
            })
        },
        reject(id) {
            this.$prompt('确认要驳回吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
                inputErrorMessage: '请填写驳回原因'
            }).then(({ value }) => {
                this.loading = true
                this.$axios.post('/Promoter/Commission/Reject', {
                    id: id,
                    reason: value
                }).then((res) => {
                    this.$message({
                        type: 'success',
                        message: res.msg
                    });
                    this.getList()
                }).catch((err) => {
                    // this.$message({
                    //     type: 'error',
                    //     message: err.data.msg
                    // });
                })
            })
        }
    }
}
</script>

<style lang="scss">
.nav-bar {
    padding: 45px 0 0;
}

.send {
    margin-top: 15px;
    margin-right: 10px;
}

.dialogForm {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
        width: 50%;
        float: left;

        &.all {
            width: 100%;
        }

        .el-select {
            width: 100%;
        }
    }
}
</style>
